<%--
  Created by IntelliJ IDEA.
  User: LMY
  Date: 2025/7/5
  Time: 17:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>文件上传</title>
    </head>
<%--    指定了base标签--%>
    <base href="<%=request.getContextPath()+"/"%>>">

    <style type="text/css">
        input[type="submit"] {
            outline: none;
            border-radius: 5px;
            cursor: pointer;
            background-color: #31B0D5;
            border: none;
            width: 70px;
            height: 35px;
            font-size: 20px;
        }

        img {
            border-radius: 50%;
        }

        form {
            position: relative;
            width: 200px;
            height: 200px;
        }

        input[type="file"] {
            position: absolute;
            left: 0;
            top: 0;
            height: 200px;
            opacity: 0;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        function prev(event) {
            //获取展示图片的区域
            var img = document.getElementById("prevView");
            //获取文件对象
            var file = event.files[0];
            //获取文件阅读器： Js的一个类，直接使用即可
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                //给img的src设置图片url
                img.setAttribute("src", this.result);
            }
        }
    </script>
    <body>
<%--    1.enctype默认application/x-www-form-urlencoded，即url编码，一般适用文本
        2.如果需要进行二进制文件的提交 enctype要指定multipart/form-data
          表示表单提交的数据有多个部分组成，也就是可以提交二进制数据和文本数据--%>
    <form action="fileUpload" method="post" enctype="multipart/form-data">
        家居图: <img src="img/8.jpg" alt="" width="200" height="200" id="prevView"><br/>
        <input type="file" name="pic" id="" value="" onchange="prev(this)"/><br/>

        家居名: <input type="text" name="name"><br/>

        <input type="submit" value="上传"/>
    </form>
    </body>
</html>
